<!--
 * @Author: wangming
 * @Date: 2021-09-11 17:18:18
 * @LastEditors: wangming
 * @LastEditTime: 2021-09-15 16:24:07
 * @FilePath: /hanma-application-designer-fed/src/components/dynamicForm/mainContent/__layouts/hlMindmap/index.vue
 * @Description: 
-->
<template>
  <div id="mountNode"></div>
</template>

<script>
import mixins from "../mixins.js";
import { MindGraph } from "./config.js";
export default {
  mixins: [mixins],
  data() {
    return {
      graph: null,
    };
  },
  watch: {
    "config.__config.direction": function (direction) {
      this.graph.changeLayout({ direction });
    },
    "config.__config.mapType": function (type) {
      this.graph.changeLayout({ type });
    },
  },
  async mounted() {
    const container = document.getElementById("mountNode");
    const width = container.scrollWidth;
    const height = 600;
    this.graph = new MindGraph({
      width,
      height,
      direction: this.config.__config.direction,
      mapType: this.config.__config.mapType,
    });
  },
  methods: {},
};
</script>

<style scoped lang="scss">
#mountNode {
  height: 600px;
  width: 100%;
}
</style>
